<template>
    <!-- 忘记密码 -->
    <el-dialog v-model="shownopwd" title="忘记密码" width="500">
        <el-form ref="nopwdRef" :model="nopwdinfo" :rules="nopwdrule">
            <el-form-item label="账号" prop="account">
                <el-input v-model="nopwdinfo.account" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="nopwdinfo.email" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="shownopwd = false">取消</el-button>
                <el-button type="primary" @click="setpwd">
                    下一步
                </el-button>
            </div>
        </template>
        <!-- 修改密码 -->
    </el-dialog>
    <el-dialog v-model="shownewpwd" title="修改密码" width="500">
        <el-form ref="setpwdRef" :model="newpwdinfo" :rules="newwdrule" label-position="top">
            <el-form-item label="输入新密码" prop="newpassword">
                <el-input v-model="newpwdinfo.newpassword" type="password" show-password />
            </el-form-item>
            <el-form-item label="再次输入新密码" prop="password">
                <el-input v-model="newpwdinfo.password" type="password" show-password />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="shownewpwd = false">取消</el-button>
                <el-button type="primary" @click="querypwd">
                    确定修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
import { accandemail,nopwd } from '@/apis/user'
import { ElMessage } from 'element-plus'
const nopwdRef = ref(null)
const setpwdRef = ref(null)
//忘记密码弹窗
const shownopwd = ref(false)
const nopwdinfo = ref({ account: '', email: '' })
const nopwdrule = ref({
    account: [{ required: true, message: '输入账号', trigger: 'blur' },
    { min: 6, max: 12, message: '6-12位', trigger: 'blur' },],
    email: [
        { required: true, message: '输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ],
})

// 修改密码的弹窗
const shownewpwd = ref(false)
const setpwd = async () => {
    nopwdRef.value.validate(async (valid) => {
        if (valid) {
            shownopwd.value = false
            const res = await accandemail(nopwdinfo.value)
            console.log(res);
            if (res.data.status !== 200) return ElMessage({ type: 'error', message: '账号和邮箱不相同' })
            ElMessage({ type: 'success', message: '账号和邮箱相同' })
            shownewpwd.value = true
        }
    })

}
const newpwdinfo = ref({ newpassword: '', password: '' })
const newwdrule = ref({
    newpassword: [
        { required: true, message: '输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '6-12位', trigger: 'blur' },],
    password: [
        { required: true, message: '输入密码', trigger: 'blur' },
        {
            validator: (rule, value, cb) => {
                if (value !== newpwdinfo.value.newpassword) {
                    cb(new Error('两次密码不相同'))
                }
                cb()
            }, trigger: 'blur'
        }
    ],
})
const querypwd =()=>{
    setpwdRef.value.validate(async (valid) => {
        if (valid) {
           const res = await nopwd({account:nopwdinfo.value.account,password:newpwdinfo.value.password})
           if(res.data.status!==200) return ElMessage({type:'error',message:'修改密码失败'})
           ElMessage({type:'succsee',message:'修改密码成功请重新登录'})
           shownewpwd.value = false
        }
    })
}
const open = () => {
    shownopwd.value = true
}
defineExpose({ open })
</script>
<style scoped lang="scss"></style>